<template>
  <div class="xq-form-wrapper">
    <a-row>
      <a-col :span="18" class="left">
        <div class="fonts">模板变量</div>
        <div class="scroll-v">
          <div class="temp" v-for="(item, index) in variables" :key="index">
            <div class="top" style="font-size: 14px;">
              {{ item.title }}
            </div>
            <ul class="variablebox" style="padding: 12px 0 0 0;" v-if="item.title === '员工个人信息'">
              <li class="variablebox-li" v-for="(itemC, idxC) in item.children" :key="idxC">
                <p>{{ itemC.name }}</p>
                <div>
                  <span v-for="(n, m) in itemC.val" :key="m">
                    {{ n.name }}
                  </span>
                </div>
              </li>
            </ul>
            <ul class="variablebox" v-else>
              <li>
                <!-- <p></p> -->
                <div>
                  <span v-for="(variable, idx) in item.children" :key="idx">
                    {{ variable.name }}
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="temp temp2">
          <div class="top top2">
            模板管理
            <a-button type="link" icon="plus" @click="showCreateModal">
              添加模板
            </a-button>
          </div>
          <div class="scroll-v">
            <div v-if="templateList.length > 0" class="temp-wrapper" style="padding-top: 3px;">
              <div v-for="(item, index) in templateList" :key="index" class="tempbox">
                <div class="temptop">
                  <img src="../../../../assets/img/hetong.png" alt="" />
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ item.name }}</span>
                    </template>
                    <span style="width:100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.name }}</span>
                  </a-tooltip>
                </div>
                <div class="tempboxbtm">
                  <a-button type="link" @click="goTemplateUpdate(item.id)">
                    编辑
                  </a-button>
                  <a-popconfirm title="确定要删除这个模板吗？" ok-text="确定" cancel-text="取消" @confirm="deleteTemplate(item)">
                    <a-button type="link">
                      删除
                    </a-button>
                  </a-popconfirm>
                </div>
              </div>
            </div>
            <div v-else class="common-empty">暂无模板</div>
          </div>
        </div>
      </a-col>
    </a-row>
    <slot></slot>
    <a-modal v-model="createModalVisible" title="创建合同模板" ok-text="确认" cancel-text="取消" @ok="createTemplate">
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="模板名称">
          <a-input placeholder="请输入" v-decorator="['templateName', { rules: [{ required: true, message: '模板名称不能为空' }] }]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { variableListAll2, templateListAllReq, templateCreateReq, templateDeleteReq } from "@/api/company/contract";
import { isContainByString } from "@/utils/index";
export default {
  data() {
    return {
      isContainByString,
      variables: [],
      categoryId: "", // 合同分类 id
      templateList: [],
      createModalVisible: false,
      form: this.$form.createForm(this, {})
    };
  },
  created() {
    this.categoryId = this.$route.query.id;
    this.loadVaribles();
    this.loadTemplates();
  },
  methods: {
    loadVaribles() {
      variableListAll2({ companyId: this.$store.state.hr.companyId })
        // variableListAll()
        .then(res => {
          const varibles = res.data;
          const jsonArr = [];
          const enterpriseVars = varibles.filter(item => item.type === "enterprise");
          // const personalVars = varibles.filter(item => item.type === "personal");
          const contractVars = varibles.filter(item => item.type === "contract");
          // 基本信息
          const basicArr = varibles.filter(item => item.type === "basic");
          if (basicArr.length > 0) jsonArr.push({ name: "基本信息", val: basicArr });
          // 身份信息
          const empIdCardArr = varibles.filter(item => item.type === "empIdCard");
          if (empIdCardArr.length > 0) jsonArr.push({ name: "身份信息", val: empIdCardArr });
          // 联系信息
          const contactArr = varibles.filter(item => item.type === "contact");
          if (contactArr.length > 0) jsonArr.push({ name: "联系信息", val: contactArr });
          // 家庭成员
          const empFamilyArr = varibles.filter(item => item.type === "empFamily");
          if (empFamilyArr.length > 0) jsonArr.push({ name: "家庭成员", val: empFamilyArr });
          // 紧急联系人
          const empContactsArr = varibles.filter(item => item.type === "empContacts");
          if (empContactsArr.length > 0) jsonArr.push({ name: "紧急联系人", val: empContactsArr });
          // 教育经历
          const empEducationArr = varibles.filter(item => item.type === "empEducation");
          if (empEducationArr.length > 0) jsonArr.push({ name: "教育经历", val: empEducationArr });
          this.variables = [
            { title: "企业信息", children: enterpriseVars },
            { title: "员工个人信息", children: jsonArr },
            { title: "合同信息", children: contractVars }
          ];
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    loadTemplates() {
      templateListAllReq(this.categoryId)
        .then(res => {
          this.templateList = res.data;
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    showCreateModal() {
      this.form.resetFields();
      this.createModalVisible = true;
    },
    createTemplate() {
      this.form.validateFields((err, values) => {
        if (!err) {
          templateCreateReq({
            categoryId: this.categoryId,
            name: values.templateName
          })
            .then(res => {
              this.$message.success("模板创建成功");
              this.createModalVisible = false;
              this.loadTemplates();
              this.goTemplateUpdate(res.data.id);
            })
            .catch(err => {
              console.log("debug log --> ", err);
              this.$message.error("模板创建失败");
            });
        }
      });
    },
    deleteTemplate(record) {
      templateDeleteReq([record.id])
        .then(res => {
          this.$message.success("模板删除成功");
          this.loadTemplates();
        })
        .catch(err => {
          console.log("debug log --> ", err);
          this.$message.error("模板删除失败");
        });
    },
    goTemplateUpdate(id) {
      var categoryId = this.categoryId;
      this.$router.push(`/${this.isContainByString("contractAdmin") ? "contractAdmin" : "contract"}/type/update/${categoryId}/${id}`);
    }
    // toInitiateSign(id){
    //   this.$router.push({
    //     name: "initiateSign",
    //     query: { id: id }
    //   })
    // }
  }
};
</script>
<style lang="scss">
.left {
  padding-right: 24px;
  border-right: 1px solid #e8e8e8;
}
.scroll-v {
  height: 690px;
  overflow-y: auto;
}
.fonts {
  line-height: 52px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #252525;
}
.temp {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-top: 0 !important;
  margin-bottom: 18px;
  .top {
    height: 52px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px 4px 0 0;
    color: rgba(0, 0, 0, 0.85);
    line-height: 52px;
    background: rgba(250, 250, 250, 1);
    box-shadow: 0px -1px 0px 0px rgba(232, 232, 232, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .top2 {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    padding-left: 24px !important;
    margin-bottom: 4px !important;
  }

  .temp-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tempbox {
    width: 290px;
    height: 160px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 8px 0px rgba(232, 232, 232, 1);
    border-radius: 4px;
    margin: 0 24px 16px 24px;
    .temptop {
      height: 117px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #e8e8e8;
      img {
        width: 60px;
        height: 60px;
        margin-right: 24px;
      }
    }
    .tempboxbtm {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      button {
        width: 49%;
        color: #9c9c9c;
      }
      .tempboxbtm {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        button {
          width: 49%;
          color: #9c9c9c;
        }
        button:nth-of-type(1) {
          border-right: 1px solid #e8e8e8;
        }
        button:hover {
          color: var(--primary);
        }
      }
    }
  }
  .variablebox {
    padding: 12px 14px;
    margin-bottom: 0;
    li {
      display: flex;
      p:nth-of-type(1) {
        margin: 0;
        padding-left: 24px;
        width: 114px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        // height: 50px;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        // -webkit-box-pack: center;
        -webkit-box-align: center;
        // text-align: center;
        border-right: 1px solid #e8e8e8;
      }
      div {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        // padding-top: 12px;
        span {
          display: block;
          margin: 0 12px;
          font-size: 14px;
          font-weight: 400;
          color: #595959;
          line-height: 28px;
          cursor: pointer;
        }
      }
    }
    .variablebox-li {
      padding-bottom: 14px;
      border-bottom: 1px solid #e8e8e8;
      margin-bottom: 14px;
      div {
        padding: 0 20px;
      }
      &:last-child {
        border: 0;
        padding-bottom: 0;
      }
    }
  }
}
.temp2 {
  border: 0 !important;
  margin-top: 0 !important;
}
</style>
